<template>
    <!-- 费用结算 -->
    <section style="background-color: white;">
        <navBar titleName="费用清单"></navBar>

        <header class="header">
            <h2>{{patientName}}</h2>
            <p>订单号{{orderNo}}</p>
        </header>

        <!--<div class="lsit_style" v-if="datainfo.addr" @click="chooseAddr()">
            <nut-row style="min-height: 45px;line-height: 45px;">
                <nut-col :span="8">
                    <div class="flex-content" style="text-align: left;"><b>{{datainfo.addr.concat}}</b></div>
                </nut-col>
                <nut-col :span="8">
                    <div class="flex-content flex-content-light" style="text-align: left;color: #666666;">
                        {{datainfo.addr.phone}}
                    </div>
                </nut-col>
                <nut-col :span="8">
                    <div class="flex-content flex-content-light"></div>
                </nut-col>
            </nut-row>
            <nut-row style="min-height: 45px">
                <nut-col :span="24">
                    <div class="flex-content" style="text-align: left;color: #666666;">{{datainfo.addr.address}}
                        <span class="chooseAddr"><a href="#">点击切换</a></span>
                    </div>
                </nut-col>
            </nut-row>
        </div>

        <div class="address-btn" @click="chooseAddr()" v-else>
            新增地址
        </div>-->

        <div>
            <ul class="cost-ul">
                <li v-for="(item) in costlist" :key="item.skuId">
                    <div>{{item.name}}<span class="txt-gray">&nbsp;&nbsp; {{ new Number(item.price / 100 ).toFixed(2) }}元 &nbsp;&nbsp;&nbsp; 折扣：{{item.discount}}</span>
                    </div>
                    <p class="txt-gray">{{item.message}}</p>
                    <p class="txt-red price">￥{{ new Number(item.discountPrice / 100).toFixed(2) }}元</p>
                </li>
                <li v-for="(item, index) in products" :key="index">
                    <div>{{item.productName}}<span class="txt-gray">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; {{item.num}}</span>
                    </div>
                    <img style="float: right;max-height: 65px; margin-top: -28px; margin-right: 28px;"
                         src="http://image.jianke.com/upload/prodimage/sl201605/2016527152843282.jpg"/>
                    <p class="txt-gray">{{item.packingProduct}}</p>
                    <p class="txt-red price">￥{{ new Number((item.productPrice * item.num) / 100).toFixed(2) }}元</p>
                </li>
            </ul>
        </div>

        <footer>
            <div class="footer">
                <!--合计：<span class="red">￥{{ new Number((datainfo.order.price||0) / 100).toFixed(2) }} </span>
                <button @click="onSubmit" :disabled="hasSubmit" v-if="hasSubmit" class="btn btn-payed">完成支付</button>-->
                <button @click="onSubmit" class="btn btn-pay">去支付</button>
            </div>
        </footer>

        <nut-dialog :visible="dialogShow" @close="dialogShow=false" :noFooter="hideFooter" title="请让病人扫码支付">
            <logoQrcode :content="link" :width="width"/>
        </nut-dialog>

    </section>
</template>


<script>
    import navBar from '@/components/common/navBar.vue'
    import logoQrcode from '@/components/common/my-code.vue'
    /* eslint-disable no-console,no-empty,no-undef,no-unused-vars */
    export default {
        components: {navBar, logoQrcode},
        name: "chargesInfo",
        data() {
            return {
                isPatient: false,
                hasSubmit: false,
                orderInfo: null,
                //"河北-石家庄-长安区-城区"
                orderNo: "",
                patientName: "",
                patientGender: "",
                nation: "",
                costlist: [],
                products: [],

                width: 175,
                dialogShow: false,
                hideFooter: true,
                link: "http://api.51self-service.cn/wx/authorize?returnUrl=http%3A%2F%2Fp.51self-service.cn", // 带图片二维码2

            }
        },
        computed: {
            //收件地址
            addr() {
                return this.$store.state.addr;
            }
        },
        watch: {
            //收件地址
            addr(curVal, oldVal) {
                //这里的curVal就是需要监听的值
                this.datainfo.addr = this.$store.state.addr;
                this.bininfo = this.$store.state.addr;
            },
        },
        created() {
            let charges = this.$route.params.charges;
            console.log(charges);
            this.costlist = JSON.parse(charges.prices);
            // this.products = JSON.parse(charges.products);

            let dataList = charges.products ? JSON.parse(charges.products) : [];
            console.log(dataList);
            for (let k in dataList) {
                let item = dataList[k].skus;
                if (item) {
                    // this.products.push.apply(this.products,dataList[k].skus);
                    for (let p in item) {
                        if (item[p].num > 0) {
                            this.products.push(item[p]);
                        }
                    }
                }
            }

            this.orderNo = charges.orderNo;
            this.link = "http://api.51self-service.cn/wx/authorize?returnUrl=https%3A%2F%2Fp.51self-service.cn%3ForderNo%3D"
                + this.orderNo;
            this.patientName = charges.lastUpdateBy;
        },
        methods: {

            onSubmit:function () {
                this.dialogShow = true;
            }
        },
    }
</script>


<style lang="css" scoped>
    .header {
        background: #fff;
        padding: 15px 0;
        text-align: center;
    }

    .address {
        margin-top: 20px;
        background-color: #fff;
        padding: 10px 10px 10px 20px;
        display: flex;
        align-items: center;
    }

    .address .icon {
        width: 25px;
        height: 34px;
    }

    .address .personinfo {
        flex-grow: 1;
        font-size: 14px;
        padding: 20px;
        color: #7E8A96;
    }

    .address p {
        margin: 5px 0;
    }

    .address-btn {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        margin-top: 20px;
        background-color: #fff;
        text-align: center;
    }

    footer {
        width: 100%;
        height: 40px;
    }

    footer .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: #fff;
        width: calc(100% - 20px);
        height: inherit;
        text-align: right;
        padding: 10px;
        font-size: 16px;
    }

    footer .footer .red {
        color: #D73A2C;
    }

    footer .footer .btn {
        margin-left: 10px;
    }

    footer .footer .btn.btn-pay {
        background-color: #2D90DE;
        border: none;
        height: 100%;
        padding: 0 20px;
        border-radius: 3px;
        font-size: 14px;
        color: #fff;
    }

    footer .footer .btn.btn-payed {
        background-color: grey;
        border: none;
        height: 100%;
        padding: 0 20px;
        border-radius: 3px;
        font-size: 14px;
        color: #fff;
    }

    .cost-ul {
        text-align: left;
        margin: 0;
        margin-top: 20px;
        background-color: #fff;
        padding: 0 12px;
    }

    .cost-ul li {
        margin: 0;
        padding: 8px 0;
        border-top: solid 1px #efefef;
        list-style: none;
    }

    .cost-ul li .price {
        font-size: 16px;
    }

    .cost-ul li p {
        margin: 5px 0;
        padding: 0;
    }

    .txt-red {
        color: #D73A2C;
    }

    .txt-gray {
        color: #999;
    }

    .lsit_style {
        margin-top: 20px;
        background-color: white;
        min-height: 90px;
        padding-left: 20px;
    }

    .chooseAddr {
        text-align: right;
        float: right;
        margin-right: 7px;
    }

    .chooseAddr a {
        color: #ded9d9;
        text-decoration-line: none;
    }
</style>
